<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习资源平台</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/banner.css">
    <script src="/js/page1.js" type="text/javascript"></script>

</head>

<body>

    <!-- 头部和导航栏 -->
    <header>
        <img src="/images/logo.png" alt="" class="logo">
        <h1>学习资源平台</h1>
        <!-- 搜索框 -->
        <div class="search-container">
            <input type="text" class="search-box" placeholder="搜索学习资源...">
            <button class="search-button">搜索</button>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li class="dropdown">
                <a href="#">技术介绍</a>
                <ul class="dropdown-content">
                    <li><a href="page1.html">HTML</a></li>
                    <li><a href="page2.html">CSS</a></li>
                    <li><a href="page3.html">JavaScript</a></li>
                </ul>
            </li>
            <li><a href="page4.html">学习资源</a></li>
            <li><a href="page5.html">关于我们</a></li>
        </ul>
    </nav>

    <!-- 轮播图 -->
    <div class="banner">
        <div class="banner_pic" id="banner_pic">
            <div class="current"><a href="http://www.atguigu.com/web/" target="_blank"><img src="images/banner_02.png"
                        alt="" /></a></div>
            <div class="pic"><a href="https://yun.itheima.com/subject/hmonlinemap/index.html?hm-pc-banner"
                    target="_blank"><img src="images/banner_01.png" alt="" /></a></div>
            <div class="pic"><a href="http://www.atguigu.com/bigdata/" target="_blank"><img src="images/banner_03.jpg"
                        alt="" /></a></div>
        </div>
        <ol id="button">
            <li class="current"></li>
            <li class="but"></li>
            <li class="but"></li>
        </ol>
    </div>

    <!-- 内容部分 -->
    <section class="content">
        <div class="content-title">学习平台</div>
        <ul>
            <li>
                <div>
                    <img src="/images/cainiao-logo.ico" alt="">
                    <p>菜鸟教程</p>
                </div>
                <div class="content-txt">
                    <a href="https://www.runoob.com/"
                        target="_blank">&nbsp;&nbsp;一个提供编程入门知识和技术的在线学习平台，涵盖多种编程语言和开发工具，旨在帮助初学者快速上手编程。</a>
                </div>
            </li>
            <li>
                <div>
                    <img src="/images/w3school-logo.png" alt="">
                    <p>W3School</p>
                </div>
                <div class="content-txt">
                    <a href="https://www.w3school.com.cn/"
                        target="_blank">&nbsp;&nbsp;一个在线教程和学习平台，专注于Web技术的学习。W3School以其简单易懂的教学风格和丰富的学习资源而受到广泛欢迎。</a>
                </div>
            </li>
            <li>
                <div>
                    <img src="/images/bokeyuan-logo.png" alt="">
                    <p>博客园</p>
                </div>
                <div class="content-txt">
                    <a href="https://www.cnblogs.com/"
                        target="_blank">&nbsp;&nbsp;一个专注于博客写作和分享的在线平台，旨在为博客作者提供一个简单易用的写作和托管服务，为用户提供丰富的阅读和学习资源。</a>
                </div>
            </li>
            <li>
                <div>
                    <img src="/images/csdn-logo.ico" alt="">
                    <p>CSDN</p>
                </div>
                <div class="content-txt">
                    <a href="https://www.csdn.net/"
                        target="_blank">&nbsp;&nbsp;中国最大的IT社区之一，致力于为中国的软件开发者提供全生命周期的服务。提供知识传播、在线学习、职业发展等多元化服务。</a>
                </div>
            </li>
            <li>
                <div>
                    <img src="/images/leetcode-logo.jpg" alt="">
                    <p>LeetCode</p>
                </div>
                <div class="content-txt">
                    <a href="https://leetcode.cn/"
                        target="_blank">&nbsp;&nbsp;一个在线编程平台，专注程序员技术成长和企业技术人才服务。提供了专业的IT技术职业化提升平台，帮助程序员快速进步和长期成长。</a>
                </div>
            </li>
        </ul>
    </section>

    <!-- 底部 -->
    <footer>
        <div>
        </div>
        <div>
            <span>友情链接：<a href="https://www.coderutil.com/" target="_blank">程序员盒子</a>&nbsp;&nbsp;<a
                    href="https://www.xue8nav.com/" target="_blank">学吧导航</a></span>
            <span>联系方式：1287062665@qq.com</span>
            <p>&copy; 2023 学习资源平台. All Rights Reserved.</p>
        </div>
    </footer>

</body>

</html>